<template>
	<div class="content">
		<!-- 左侧菜单列表 -->
		<ul class="category">
			<li :class="{ active : active == item.tab }" v-for="(item, index) in categorys" :key="item.tab" @click="categoryClick(item.tab)">{{item.name}}</li>
		</ul>
		<!-- 右侧商品列表 -->
		<ul class="product">
			<li class="item" v-for="(item, index) in list" :key="item.id">
				<van-image class="img" :src="item.imgUrl +item.id+'.jpg'" round />
				<div class="detail">
					<h4>{{ item.title }}</h4>
					<p>{{ item.sale }}</p>
					<div class="price">
						<span class="yen">&yen;</span>{{ item.yen }}
						<span class="origin">&yen;{{ item.origin }}</span>
					</div>
				</div>
				<span class="count">{{ cartList?.[shopId]?.[item.id]?.count ?? 0}}</span>
				<van-stepper class="stepper" v-model="item.count" @change="changeStepper(item)" min="0" theme="round" button-size=".2rem" integer />
			</li>
		</ul>
	</div>
</template>

<script>
import _axios from '@/api/axios.js';
import { ref, reactive, toRefs, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router'
export default {
	name: 'Content',
	setup () {
		const store = useStore();
		const route = useRoute();

		// 左侧菜单列表
		const categorys = ref([{
			name: '全部商品',
			tab: 0
		}, {
			name: '限时秒杀',
			tab: 1
		}, {
			name: '新鲜水果',
			tab: 2
		}, {
			name: '休闲食品',
			tab: 3
		}, {
			name: '时令蔬菜',
			tab: 4
		}, {
			name: '肉蛋家禽',
			tab: 5
		}])
		const active = ref(0);
		const categoryClick = (tab) => {
			console.log(tab);
			active.value = tab;
		}

		// 右侧商品列表
		const data = reactive({ list: {} })
		const getProduct = () => {
			_axios.get('api/getProduct', { tab: active.value }).then(res => {
				console.log(res);
				data.list = res.data;
			}).catch(err => {
				console.log(err);
			});
		};

		// 步进器
		const shopId = route.params.id;
		const cartList = reactive(store.state.cartList);
		const changeStepper = (item) => {
			store.commit('Set_Cart', { shopId, item })
		}


		watchEffect(() => {
			getProduct(); // 会主动监听方法中依赖的active.value,发生改变会自动执行 
		})

		return {
			categorys,
			active,
			categoryClick,
			shopId,
			cartList,
			changeStepper,
			...toRefs(data)
		};
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 1.6rem;
	bottom: 0.5rem;
}
.category {
	width: 0.76rem;
	height: 100%;
	overflow-y: auto;
	background-color: #f5f5f5;
	li {
		line-height: 0.4rem;
		text-align: center;
		font-size: 0.14rem;
		color: #333;
		&.active {
			background-color: #f1f1f1;
			color: #ee0a24;
		}
	}
}
.product {
	flex: 1;
	overflow-y: auto;
	.item {
		display: flex;
		position: relative;
		padding: 0.12rem 0;
		margin: 0 0.16rem;
		border-bottom: 1px solid #f1f1f1;
		.img {
			width: 0.68rem;
			height: 0.68rem;
			margin-right: 0.16rem;
		}
		.detail {
			h4 {
				line-height: 0.2rem;
				font-size: 0.14rem;
				color: #333;
				font-weight: bold;
			}
			p {
				margin: 0.06rem 0;
				line-height: 0.16rem;
				font-size: 0.12rem;
				color: #333;
			}
			.price {
				font-size: 0.14rem;
				line-height: 0.2rem;
				color: #e93b3b;
				.yen {
					font-size: 0.12rem;
				}
				.origin {
					line-height: 0.2rem;
					font-size: 0.12rem;
					color: #999;
					text-decoration: line-through;
				}
			}
		}
		.stepper {
			position: absolute;
			right: 0;
			bottom: 0.12rem;
			::v-deep .van-stepper__input {
				color: #fff;
			}
		}
	}
	.count {
		position: absolute;
		right: 0.34rem;
		bottom: 0.14rem;
		z-index: 1;
		color: #333;
		font-size: 0.14rem;
	}
}
</style>
